<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线考试</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <base target="_blank">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/exam.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <Myheader></Myheader>
        <el-main>
            <div class="c900 h100 flex" style="flex-direction: column; background-color: #fff">
                <el-form :inline="true" style="width: 100%">
                    <el-form-item label="课程">
                        <el-select placeholder="课程">
                            <el-option label="Java" value="1"></el-option>
                            <el-option label="Html" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题目">
                        <el-input placeholder="题目"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                        <el-button type="primary" @click="showEditor=true">添加</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="[]" style="width: 100%; flex-grow: 1">
                    <el-table-column prop="" label="题目" width="180"></el-table-column>
                    <el-table-column prop="" label="课程" width="180"></el-table-column>
                    <el-table-column prop="" label="题型" width="180"></el-table-column>
                    <el-table-column prop="" label="答案" width="180"></el-table-column>
                    <el-table-column prop="" label="选项"></el-table-column>
                    <el-table-column prop="" label="修改" width="180">
                        <template slot-scope="scope">
                            <el-button @click="mod(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="text-align: right; width: 100%;margin-bottom: 10px"
                               background
                               layout="prev, pager, next"
                               :total="1000">
                </el-pagination>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
    <el-dialog title="题目信息" :visible.sync="showEditor">
        <el-form>
            <el-form-item label="题型" :label-width="100">
                <el-select placeholder="请选择题型">
                    <el-option label="填空题" value="1"></el-option>
                    <el-option label="单选题" value="2"></el-option>
                    <el-option label="多选题" value="3"></el-option>
                    <el-option label="判断题" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程" :label-width="100">
                <el-select placeholder="请选择课程">
                    <el-option label="Java" value="1"></el-option>
                    <el-option label="Oracle" value="2"></el-option>
                    <el-option label="HTML" value="3"></el-option>
                    <el-option label="CSS" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目" :label-width="100">
                <el-input autocomplete="off" type="textarea" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="选项" :label-width="100">
                <div class="grid3" style="grid-template-columns: auto 20px 50px">
                    <el-input autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>A
                    <el-switch active-color="#13ce66" inactive-color="#999"></el-switch>
                    <el-input autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>B
                    <el-switch active-color="#13ce66" inactive-color="#999"></el-switch>
                    <el-input autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>C
                    <el-switch active-color="#13ce66" inactive-color="#999"></el-switch>
                    <el-input autocomplete="off" style="width: 90%">
                        <span slot="append">
                            <el-button icon="el-icon-plus"></el-button>
                            <el-button icon="el-icon-minus"></el-button>
                        </span>
                    </el-input>D
                    <el-switch active-color="#13ce66" inactive-color="#999"></el-switch>
                </div>

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEditor = false">取 消</el-button>
            <el-button type="primary" @click="showEditor = false">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            showEditor:false
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    #app>.el-container>.el-main{
        overflow: hidden;
        background-image: url("https://img0.baidu.com/it/u=668574498,1720392676&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=295");
        background-size: cover;
    }
    .el-main{
        padding: 0px 10px;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 40px;
        height: 40px;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
    li>ol{
        margin-bottom: 20px;
    }
    li{
        margin-block: 10px;
    }
    .fill{
        border: 0px;
        border-bottom: 1px #000 solid;
        margin-inline: 3px;
        padding: 5px;
        text-align: center;
        color: #0a6999;
    }
    .el-form-item{
        margin-block: 10px 0px;
        padding-inline: 10px;
    }
    .el-switch{
        align-self: center
    }
</style>

</html>